<template>
  <div id="classificationIndex">
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="
								dialog.isEdit = false;
								dialog.saveOrEditDiv = true;
								getCascaderData();
							"
            >
              添加分类
            </el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              row-key="code"
              :default-expand-all="true"
              lazy
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="code" label="编号"></el-table-column>
              <el-table-column prop="typeDesc" label="描述"></el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
                  <el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加或修改-业务弹窗 -->
    <el-dialog
      :title="dialog.isEdit == true ? '编辑信息' : '新增信息'"
      :visible.sync="dialog.saveOrEditDiv"
      width="80%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="100px">
        <el-form-item label="分类名称" prop="name">
          <el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入分类名称" maxlength="20"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item label="上级分类" prop="parentID">
            <el-cascader @change="cascaderChange" v-model="saveOrEditData.parentID" :options="cascaderData" :props="{ checkStrictly: true }"></el-cascader>
          </el-form-item>
        </el-row>
        <el-form-item label="分类描述" prop="typeDesc">
          <el-input
            show-word-limit
            maxlength="150"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="对物资分类进行描述"
            v-model="saveOrEditData.typeDesc"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input
            show-word-limit
            maxlength="150"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="如需备注输入描述"
            v-model="saveOrEditData.comment"
          ></el-input>
        </el-form-item>
        <!-- 按钮组 -->
        <el-form-item>
          <el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
          <el-button
            @click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
          >
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看-业务弹窗 -->
    <el-dialog title="分类详情" :visible.sync="dialog.showDiv" width="50%" :show-close="false" :destroy-on-close="true" :close-on-click-modal="false">
      <el-descriptions class="margin-top" :column="2" border>
        <template slot="extra">
          <el-button
            @click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
          >
            关闭
          </el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            编号
          </template>
          {{ showData.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            分类名称
          </template>
          {{ showData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            分类描述
          </template>
          {{ showData.typeDesc }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            备注
          </template>
          {{ showData.comment }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import * as axiosAPI from '@/api/wms/classification.js';
import {list} from "@/api/wms/classification.js";
export default {
  name: 'classificationIndex',
  data() {
    return {
      //表格数据
      tableData: [],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false
      },
      //添加或编辑表单数据
      saveOrEditData: {
        classificationID: null,
        comment: null,
        name: null,
        code: null,
        parentID: "-1",
        typeDesc:null,
        innerCode:null
      },
      //组织选择级联下拉数据
      cascaderData: [],
      //添加编辑表单-检验
      saveOrEditDataFormRules: {
        name: { required: true, message: '请输入分类名称', trigger: 'blur' },
        parentID: { required: true, message: '请选择上级分类', trigger: 'change' },
      },
      //展示表单数据
      showData: {
        classificationID: null,
        comment: null,
        name: null,
        code: null,
        parentID: "-1",
        typeDesc:null,
        innerCode:null
      },
      //表单加载值
      formLoading: false
    };
  },
  mounted() {
    this.getTableDatas();
  },
  methods: {
    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.list()
        .then(function(response) {
          if (response.code == '0000') {
            let treeData = _this.$myUtil.list2TreeData(response.data,"-1", 'classificationID');
            //console.dir(treeData);
            _this.tableData = treeData;
          }
        });
    },
    //查询级联下拉数据
    getCascaderData(id) {
      let _this = this;
      axiosAPI.list()
        .then(function(response) {
          if (response.code == '0000') {
            let treeData = _this.$myUtil.listToCascaderTreeData(response.data, 'classificationID', 'name', 'classificationID', id);
            //console.dir(treeData);
            _this.cascaderData = treeData;
          }
        });
    },
    //级联下拉数据切换
    cascaderChange(data){
      if(data.length>0){
        this.saveOrEditData.parentID = data[data.length-1];
      }else{
        this.saveOrEditData.parentID = "-1";
      }

    },
    //重置添加、编辑、展示表单
    resetAddOrEditOrShowForm() {
      this.showData = {
        classificationID: null,
        comment: null,
        name: null,
        code: null,
        parentID: "-1",
        typeDesc:null,
        innerCode:null
      };
      this.saveOrEditData = {
        classificationID: null,
        comment: null,
        name: null,
        code: null,
        parentID: "-1",
        typeDesc:null,
        innerCode:null
      };
    },
    //提交-添加、编辑表单
    submitSaveOrEdit() {
      let _this = this;
      this.$refs.saveOrEditDataForm.validate(valid => {
        if (valid) {
          this.formLoading = true;
          let _this = this;

          if(_this.dialog.isEdit == true){

            axiosAPI.update(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });

          }else{
            axiosAPI.add(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });
          }
        } else {
          return false;
        }
      });
    },
    //提交-删除
    submitDelete(ids) {
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //行-查看
    rowShow(data) {
      this.showData = JSON.parse(JSON.stringify(data));
      this.dialog.showDiv = true;
    },
    //行-编辑
    rowEdit(data) {
      this.getCascaderData(data.organizationID);
      this.dialog.saveOrEditDiv = true;
      this.saveOrEditData = JSON.parse(JSON.stringify(data));
      this.dialog.isEdit = true;

    },
    //行-删除
    rowDelete(data) {
      this.$confirm('删除将会删除子集分类数据，确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.innerCode);
      });
    }
  }
};
</script>

<style scoped></style>
